<template>
    <el-card v-if="getInfo" class="box-card">
        <div slot="header" class="clearfix">
            <span>关于老师</span>
        </div>
        <el-row style="margin-left: 10px">
            <el-col :span="5">
                <el-avatar icon="el-icon-user-solid"></el-avatar>
            </el-col>
            <el-col :span="12">
                <el-row>
                    <div>{{userName}}</div>
                </el-row>
                <el-row>
                    <div class="subText">{{userDes}}</div>
                </el-row>
            </el-col>
        </el-row>
        <div class="tableTitle"></div>
        <el-row type="flex" justify="center">
            <el-tag v-for="item in items"
                    :key="item.text"
                    :type="item.type"
                    effect="plain">{{item.text}}
            </el-tag>
        </el-row>
        <div class="tableTitle"></div>
        <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="8">
                <el-row type="flex" class="text" justify="center"><span>博客</span></el-row>
                <el-row type="flex" justify="center">
                    <el-button type="text" class="num" @click="toBlogs">{{blogNum}}</el-button>
                </el-row>
            </el-col>
            <el-col :span="8">
                <el-row type="flex" class="text" justify="center"><span>知识库</span></el-row>
                <el-row type="flex" justify="center">
                    <el-button type="text" class="num" @click="toRepos">{{repoNum}}</el-button>
                </el-row>
            </el-col>
            <el-col :span="8">
                <el-row type="flex" class="text" justify="center"><span>关注者</span></el-row>
                <el-row type="flex" justify="center">
                    <el-button type="text" class="num">{{followers}}</el-button>
                </el-row>
            </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="center">
            <div style="align-items: center">
                <el-button type="primary" @click="follow">关注他</el-button>
                <el-button type="success" @click="book">预约</el-button>
                <el-button @click="sendText">发私信</el-button>
            </div>
        </el-row>
    </el-card>
</template>

<script>
    import POST from "../../api/POST";

    export default {
        name: "teacherInfo",
        data() {
            return {
                getInfo: false,
                info: [],
                userDes: "",
                userName: "",
                blogNum: "",
                repoNum: "",
                followers: "",
                items: [
                    {type: '', text: ""},
                ],
            }
        },
        props: {
            message: String  //接收父组件传过来的值，这是老师id
        },
        mounted() {
            this.getUserInfo(this.message);
        },
        methods: {
            getUserInfo(id) {
                let data = {
                    'account': id,
                };
                POST.infoShowById(data).then(res => {
                    this.info = res;
                    this.getInfo = true;
                    this.userDes = this.info.introduction;
                    this.userName = this.info.name;
                    this.items[0].text = this.info.teacher_type;
                    this.blogNum = this.info.blog_num;
                    this.repoNum = this.info.clloect_num;
                    this.followers = this.blogNum + this.repoNum;
                });
            },
            toBlogs() {
                this.$router.push({path: `/teacher/`+ this.message +`/detail`})
            },
            toRepos() {
                this.$router.push({path: `/teacher/`+ this.message +`/detail`})
            },
            book() {
                this.$router.push({path: `/teacher/`+ this.message + `/appointment`})
            },
            follow() {

            },
            sendText() {

            },
        }
    }
</script>

<style scoped>
    .box-card {
        margin-top: 20px;
        width: 400px;
    }

    .tableTitle {
        position: relative;
        margin: 15px;
        width: 320px;
        height: 1px;
        background-color: #d4d4d4;
        text-align: center;
        font-size: 16px;
        color: rgba(101, 101, 101, 1);
    }

    .text {
        font-size: 14px;
    }

    .subText {
        font-size: 14px;
        color: rgba(104, 121, 131, 0.76);
    }

    .num {
        font-size: 24px;
        font-weight: 700;
    }

    .row-bg {
        margin-bottom: 16px;
    }

    .clearfix {
        font-size: 14px;
        color: rgba(65, 94, 134, 0.76);
        text-align: center;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>